<template>
	<view class="jifenlist">
		<view class="tabline">
			<view class="tabbox">
				<view class="itemtab" :class="tab=='all'?'act':''" @click="selecttab('all')">
					<view class="tabname">
						全部
					</view>
					<view class="line">
						
					</view>
				</view>
				<view class="itemtab" :class="tab=='income'?'act':''" @click="selecttab('income')">
					<view class="tabname">
						收入
					</view>
					<view class="line">
						
					</view>
				</view>
				<view class="itemtab" :class="tab=='expense'?'act':''" @click="selecttab('expense')">
					<view class="tabname">
						支出
					</view>
					<view class="line">
						
					</view>
				</view>
			</view>
			<view class="pickerbox">
				<picker @change="bindPickerChange" :value="index" :range="array" range-key="label">
							<view class="picker">{{array[index].label}}   <view class=" iconfont icon-xiangxia"></view> </view>
					</picker>
			</view>
		</view>
		<view class="list">
			<view class="itemlist" v-for="(item,index) in list " :key="index">
				<view class="left">
					<view class="yuan red">
						<view class="iconfont icon-huizhang">
							
						</view>
					</view>
					<view class="info">
						<view class="nameline">
							<view class="name">
							{{item.recordTypeName}}·
							</view>
							<view class="type">
								{{item.remark}}
							</view>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="pricebox">
					{{item.amount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {myFinancialRecords} from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[],
				tab:'all',
				num:1,
				total:0,
				index:3,
				array:[
					{
						type:0,
						label:'待审核'
					},
					{
						type:1,
						label:'审核完成'
					},
					{
						type:2,
						label:'审核失败'
					},
					{
						type:'',
						label:'全部'
					}
				]
			}
		},
		onShow() {
			let p={
				pageSize:10,
				pageNum:1,
				type:'all',
				auditStatus:''
			}
			myFinancialRecords(p).then(res=>{
				console.log(res)
				this.list=res.data.data.items
				this.total=res.data.data.total
			})
		},
		methods: {
			bindPickerChange(e){
				this.index=e.detail.value
				this.total=0
				this.num=1
				let p={
					pageSize:10,
					pageNum:this.num,
					type:this.tab,
					auditStatus:this.array[this.index].type
				}
				myFinancialRecords(p).then(res=>{
					this.list=res.data.data.items
					this.total=res.data.data.total
				})
			},
			selecttab(e){
				this.tab=e
				this.total=0
				this.num=1
				this.index=3
				let p={
					pageSize:10,
					pageNum:this.num,
					type:this.tab,
					auditStatus:''
				}
				myFinancialRecords(p).then(res=>{
					this.list=res.data.data.items
					this.total=res.data.data.total
				})
			},
		},
		onReachBottom() {
		   console.log("触底了，加载更多数据")
		   if(this.list.length<=this.total){
						
					}else{
						this.num=this.num+1
						let p={
							pageSize:10,
							pageNum:this.num,
							type:this.tab,
							auditStatus:this.array[this.index].type
						}
						myFinancialRecords(p).then(res=>{
							this.list=this.list.concat(res.data.data.items)
							
							console.log(res,'购买')
						})
					}
		 },
	}
</script>

<style lang="less" scoped>
   .jifenlist{
	   width: 750rpx;
	   box-sizing: border-box;
	   background-color: #F1f1f1;
	   padding: 20rpx;
	   .tabline{
		   width: 100%;
		   display: flex;
		   align-items: center;
		   justify-content: space-between;
		   .tabbox{
			   width: 60%;
			   display: flex;
			   align-items: center;
			   text-align: center;
			   justify-content: space-evenly;
			   color: #A8A8A8 ;
			   .line{
				   width: 40rpx;
				   height: 6rpx;
				   border-radius: 3rpx;
				  
				   margin: auto;
			   }
			   .act{
				   
					font-weight: bold;
					color: black;
					.line{
						 background-color: #FF5B27 ;
					}
			   }
		   }
		   
	   }
	   .pickerbox{
		   width: 25%;
		   height: 50rpx;
		   .picker{
			   width: 100%;
			   height: 100%;
			 
			   text-align: center;
			   display: flex;
			   align-items: center;
		   }
	   }
	   .list{
		   width: 100%;
		   box-sizing: border-box;
		   padding: 20rpx;
		  
		   padding-top: 20rpx;
		   .itemlist{
			   width: 100%;
			   display: flex;
			   align-items: center;
			   justify-content: space-between;
			    background-color: white;
				box-sizing: border-box;
				padding: 20rpx;
			   margin-top: 20rpx;
			   .left{
				   display: flex;
				   align-items: center;
				   .yuan{
					   width: 70rpx;
					   height: 70rpx;
					   line-height: 70rpx;
					   border-radius: 50%;
					   text-align: center;
					   .iconfont{
						   margin: auto;
						   font-weight: bold;
					   }
				   }
				   .red{
					   background-color: #FFEBE3 ;
					   color: #FF2C1F;
					   
				   }
				   .info{
					   margin-left: 20rpx;
					   .nameline{
						   display: flex;
						   align-items: center;
						   font-size: 30rpx;
						   font-weight: bold;
						   
					   }
					   .time{
						   font-size: 26rpx;
						   color: #A0A0A0 ;
					   }
				   }
				   
			   }
			   .pricebox{
				   font-weight: bold;
			   }
		   }
		   
	   }
   }
</style>
